<template>
  <div class="custom-el-main">
    <el-container>
      <el-main>
        <div v-loading="pageLoading">
          <el-card class="el-card-title">
            <template #header>
              <div class="card-title-header">
                <span class="el-field-area-title-text">
                  <i class="el-icon-c-scale-to-original"></i>
                  {{ $t("i18n.path_flow_quick_field_set") }}
                </span>
                <el-button
                  class="el-field-title-close"
                  icon="el-icon-finished"
                  @click="SaveForm()"
                  size="mini"
                  type="primary"
                  >{{ $t("i18n.co_save") }}</el-button
                >
                <el-button
                  class="el-field-title-close"
                  icon="el-icon-lx-back"
                  @click="
                    this.$store.commit(
                      'closeCurrentPage',
                      this.$route.fullPath
                    );
                    this.$router.push({
                      path: '/flowlist',
                    });
                  "
                  size="mini"
                  type="danger"
                  >{{ $t("table.Global_Back") }}</el-button
                >
              </div>
            </template>
            <el-scrollbar :style="autoHeight">
              <div
                class="title"
                v-for="element in form.areas"
                :key="element.id"
              >
                <el-card
                  :class="element.usable ? 'box-card' : 'box-card-danger'"
                  style="min-height:100px"
                >
                  <template #header>
                    <div
                      :class="
                        element.usable ? 'card-header' : 'card-header-danger'
                      "
                    >
                      <span class="el-field-area-text">
                        <i class="el-icon-postcard"></i>
                        {{
                          $i18n.locale === "zh-cn"
                            ? element.areaCNName
                            : element.areaENName
                        }}
                      </span>
                      <el-tooltip
                        placement="right-start"
                        v-if="element.mainTable == ''"
                        effect="light"
                      >
                        <template #content>
                          <el-tag
                            effect="dark"
                            size="mini"
                            style="margin-left: 5px; margin-top: 5px;"
                            :type="element.usable ? '' : 'danger'"
                          >
                            {{ $t("formi18n.form_tables") }}：{{
                              element.areaCNName
                            }}
                          </el-tag>
                          <br />
                          <el-tag
                            effect="dark"
                            size="mini"
                            style="margin-left: 5px; margin-top: 5px; "
                            :type="element.usable ? '' : 'danger'"
                          >
                            {{ $t("formi18n.form_tables_en") }}：{{
                              element.areaENName
                            }}
                          </el-tag>
                          <br />
                          <el-tag
                            effect="dark"
                            size="mini"
                            style="margin-left: 5px; margin-top: 5px;"
                            :type="element.usable ? '' : 'danger'"
                          >
                            {{ $t("formi18n.form_main") }}：{{
                              element.tableCode
                            }}
                          </el-tag>
                        </template>
                        <el-tag
                          size="mini"
                          :type="element.usable ? '' : 'danger'"
                          style="margin-left: 5px;"
                          effect="dark"
                          >{{ $t("formi18n.form_main") }}</el-tag
                        >
                      </el-tooltip>
                      <el-tooltip placement="right-start" v-else effect="light">
                        <template #content>
                          <el-tag
                            effect="dark"
                            size="mini"
                            style="margin-left: 5px; margin-top: 5px;"
                            :type="element.usable ? 'warning' : 'danger'"
                          >
                            {{ $t("formi18n.form_tables") }}：{{
                              element.mainTableName
                            }}
                          </el-tag>
                          <br />
                          <el-tag
                            effect="dark"
                            size="mini"
                            style="margin-left: 5px; margin-top: 5px; "
                            :type="element.usable ? 'warning' : 'danger'"
                          >
                            {{ $t("formi18n.form_tables_en") }}：{{
                              element.mainTableENName
                            }}
                          </el-tag>
                          <br />
                          <el-tag
                            effect="dark"
                            size="mini"
                            style="margin-left: 5px; margin-top: 5px;"
                            :type="element.usable ? 'warning' : 'danger'"
                          >
                            {{ $t("formi18n.form_main") }}：{{
                              element.mainTable
                            }}
                          </el-tag>
                        </template>
                        <el-tag
                          effect="dark"
                          size="mini"
                          style="margin-left: 5px;"
                          :type="element.usable ? 'warning' : 'danger'"
                          >{{ $t("formi18n.form_child_table") }}</el-tag
                        >
                      </el-tooltip>
                    </div>
                  </template>
                  <el-form size="mini">
                    <div>
                      <el-col
                        v-for="(item, index) in element.fields"
                        :key="index"
                        :class="
                          element.usable
                            ? 'el-field-area-close'
                            : 'el-field-area-close-danger'
                        "
                        :style="'width: 50%'"
                      >
                        <el-form-item
                          :label="
                            $i18n.locale == 'zh-cn' ? item.cnName : item.enName
                          "
                          label-position="left"
                          label-width="180px"
                          :class="
                            element.usable && item.usable
                              ? 'el-feild-fields-item'
                              : 'el-feild-fields-delete-item '
                          "
                        >
                          <el-input
                            :disabled="1 == 1"
                            style="width:86%"
                          ></el-input>
                          <el-checkbox
                            style="margin-left:4px"
                            v-model="item.selected"
                            :label="$t('i18n.path_flow_quick_field_display')"
                            border
                            :disabled="!element.usable || !item.usable"
                            @change="itemSelected(item, element)"
                          ></el-checkbox>
                        </el-form-item>
                      </el-col>
                    </div>
                  </el-form>
                </el-card>
              </div>
            </el-scrollbar>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import confVue from "../../utils/conf.vue";
let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {},
  data() {
    return {
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      page_Title: "",
      pageType: "add",
      pageLoading: true,
      apipath: "flowinfo",
      way: confVue.$flowApi,
      form: {},
      fields: [],
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.pageLoading = true;
    this.InitFrom();
  },
  methods: {
    ///加载页面高度
    getHeight() {
      this.outHeight.height = windowHeight - 195 + "px";
      this.autoHeight.height = windowHeight - 195 + "px";
    },
    ///加载表单数据
    InitFrom() {
      let url =
        this.apipath +
        "/v1.0/quickfield?flowid=" +
        this.$route.query.flowid +
        "&versionId=" +
        this.$route.query.versionid +
        "&type=quick";
      reqVue.$Post(null, url, this.way).then(
        function(data) {
          if (data.status) {
            this.form = data.body;
            this.pageLoading = false;
          } else {
            this.$message.error(data.message);
            this.pageLoading = false;
          }
        }.bind(this)
      );
    },
    ///保存表单数据
    SaveForm() {
      this.form.areas.forEach((element) => {
        element.fields.forEach((item) => {
          if (item.selected)
            this.fields.push({
              flowVersionId: this.$route.query.versionid,
              flowId: this.$route.query.flowid,
              fieldCode: item.fieldCode,
              fieldKey: item.fieldKey,
              table: element.tableCode,
              controlsType: item.controlStype,
              controlSouces: item.controlSouces,
            });
        });
      });
      this.$confirm(this.$t("i18n.confirm_save"), this.$t("i18n.confirm"), {
        type: "warning",
      }).then(() => {
        this.pageLoading = true;
        reqVue
          .$Post(
            this.fields,
            this.apipath +
              "/v1.0/savedisplyfield/quick?flowid=" +
              this.$route.query.flowid +
              "&versionId=" +
              this.$route.query.versionid,
            this.way
          )
          .then(
            function(data) {
              if (data.status) {
                this.$store.commit("closeCurrentPage", this.$route.fullPath);
                this.$router.push({
                  path: "/flowlist",
                });
              } else {
                this.pageLoading = false;
                this.$message.error(data.message);
              }
            }.bind(this)
          );
      });
    },
    ///选中时
    itemSelected(item, areas) {
      if (item.selected) {
        var length = areas.fields.filter((o) => o.selected).length;
        if (length > 5) {
          item.selected = false;
          this.$message.error(this.$t("i18n.flow_show_field_more"));
        }
      }
    },
  },
};
</script>
